<template>
	<div class="home">
		<!-- <h3>wangEditor with vue</h3> -->
		<div id="demo1">
			<!-- {{htmlCode}} -->
			 <mp-html :content="htmlCode"></mp-html>
		</div>
		
		<!-- <button type="button" class="btn" @click="getEditorData">获取当前内容</button> -->
		<!-- <h3>内容预览</h3>
		<textarea name="" id="" cols="170" rows="20" readonly v-model="editorData"></textarea> -->
	</div>
</template>

<script>
// 引入 wangEditor
import wangEditor from 'wangeditor';
export default {
	props:{
		htmlCode:{//默认值
			type:String,
			default:""
		}
	},
	data() {
		return {
			editor: null,
			editorData: ''
		};
	},
	mounted() {
		const editor = new wangEditor(`#demo1`);
		// 配置 onchange 回调函数，将数据同步到 vue 中
		editor.config.onchange = newHtml => {
			this.editorData = newHtml;
		};
		editor.config.uploadImgShowBase64 = true;
		// 创建编辑器
		editor.create();
		this.editor = editor;
	},
	methods: {
		getEditorData() {
			// 通过代码获取编辑器内容
			let data = this.editor.txt.html();
			// alert(data);
			return data;
		}
	},
	beforeDestroy() {
		// 调用销毁 API 对当前编辑器实例进行销毁
		this.editor.destroy();
		this.editor = null;
	}
};
</script>

<style lang="scss">
.home {
	width: 80%;
	margin: auto;
	position: relative;
	.btn {
		position: absolute;
		right: 0;
		top: 0;
		padding: 5px 10px;
		cursor: pointer;
	}
	h3 {
		margin: 30px 0 15px;
	}
}
@media screen and (min-width:760px) {
	.home{
		width: 200%;
	}
}
</style>
